<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="/css/css.css" rel="stylesheet" type="text/css"/>
    <link href="/css/common.css" rel="stylesheet" tyle="text/css"/>
    <link href="/css/Orders.css" rel="stylesheet" type="text/css"/>
    <script src="/js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="/js/jquery.reveal.js" type="text/javascript"></script>
    <script src="/js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
    <script src="/js/jquery.sumoselect.min.js" type="text/javascript"></script>
    <script src="/js/common_js.js" type="text/javascript"></script>
    <script src="/js/footer.js" type="text/javascript"></script>
    <script src="/js/layer/layer.js"></script>
    <script src="/js/axios.min.js"></script>
    <script src="/js/vue.js"></script>
    <title>确认订单界面</title>
</head>
<script type="text/javascript" th:inline="javascript">
    /*$(document).ready(function () {
        window.asd = $('.SlectBox').SumoSelect({ csvDispCount: 3 });
        window.test = $('.testsel').SumoSelect({okCancelInMulti:true });
    });*/
    window.onload = function () {
        axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
        //接收上一级菜单发送的商品购买JSON
        let cartsGet = JSON.parse(localStorage.getItem("carts"));

        let vue = new Vue({
            el: "#Orders",
            data: {
                //待购买商品集合
                carts: cartsGet,
                //商品总价
                cartPay: 0,
                addresses: {},
                address: {},
                //记录address在addresses数组中的位置
                position: 0,
                //存储order信息
                order: {
                    order_num: 0,
                    user_id: 0,
                    order_time: 0,
                    accept: 0,
                    tel: 0,
                    address: 0,
                    prices: 0,
                    sendmode: '圆通快递',
                    paymode: '余额支付',
                    pay_time: 0,
                    send_time: 0,
                    accept_time: 0,
                    status: 1,
                    //待购买商品集合
                    carts: cartsGet
                }
            },
            methods: {
                //获取地址，实现address循环显示并将对应数据存入data中
                getAddress: function () {
                    if (this.position >= this.addresses.length - 1) {
                        this.position = -1
                    }
                    this.address = this.addresses[++this.position];
                    //console.log(this.address,this.position);
                },

                //返回购物车
                returnCart: function () {
                    location.href = "/front/cart";
                },

                //返回后端，生成订单并写入数据库
                addOrder: function () {
                    /*console.log(this.carts)
                    console.log(this.order)*/
                    axios.post("/front/order/add", this.order, {
                        withCredentials: false
                    }).then((r) => {
                        if (r.data.code === 200) {
                            //console.log(r.data.data)
                            //将order转发至orders_check页面
                            localStorage.setItem('order', JSON.stringify(r.data.data));
                            location.href = "/front/order/check";
                        } else {
                            console.log(r.data.code + ":" + r.data.msg);
                        }
                    });

                }
            },
            mounted() {
                console.log(this.carts);
                //初始化获取当前user所有address
                axios.get("/ucenter/address/list", {
                    withCredentials: false
                }).then(r => {
                    if (r.data.code === 200) {
                        this.addresses = r.data.data;
                        //设置默认address
                        for (let address of r.data.data) {
                            if (address.isdefault === 'y') {
                                this.address = address;
                                break;
                            }
                            this.position++;
                        }
                    }
                });

                //计算总金额
                for (let cart of this.carts) {
                    this.cartPay += cart.price * cart.mount;
                }
            }
        });
    }

</script>
<body>
<!--顶部样式-->
<div id="top">
    <div class="top">
        <div class="Collection"><em></em><a href="#">收藏我们</a></div>
        <div class="hd_top_manu clearfix">
            <ul class="clearfix">
                <li class="hd_menu_tit zhuce" data-addclass="hd_menu_hover">欢迎光临本店！<a href="#" class="red">[请登录]</a> 新用户<a
                        href="#" class="red">[免费注册]</a></li>
                <li class="hd_menu_tit" data-addclass="hd_menu_hover"><a href="#">我的订单</a></li>
                <li class="hd_menu_tit" data-addclass="hd_menu_hover"><a th:href="@{/front/cart}">购物车(<b>0</b>)</a></li>
                <li class="hd_menu_tit" data-addclass="hd_menu_hover"><a href="#">联系我们</a></li>
                <li class="hd_menu_tit list_name" data-addclass="hd_menu_hover"><a href="#" class="hd_menu">客户服务</a>
                    <div class="hd_menu_list">
                        <ul>
                            <li><a href="#">常见问题</a></li>
                            <li><a href="#">在线退换货</a></li>
                            <li><a href="#">在线投诉</a></li>
                            <li><a href="#">配送范围</a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
<!--logo和搜索样式-->
<div id="header" class="header">
    <div class="logo">
        <a th:href="@{/front/SPU/index}"><img th:src="@{/images/logo1.png}" alt="logo" height="139" width="247"/></a>
        <div class="phone">
            免费咨询热线:<span class="telephone">400-3454-343</span>
        </div>
    </div>
    <div class="Search">
        <p><input name="" type="text" class="text"/><input name="" type="submit" value="" class="Search_btn"/></p>
        <p class="Words"><a th:each="cate : ${category}" th:href="@{/front/SPU/index/{id}(id=${cate.id})}"
                            th:text="${cate.name}"></a></p>
    </div>
</div>
<!--导航栏样式-->
<div id="Menu" class="clearfix">
    <div class="Menu_style">
        <div id="allSortOuterbox" class="display">
            <div class="Category"><a href="#" class="Menu_img"><em></em></a></div>
            <div class="hd_allsort_out_box_new">
                <!--左侧栏目开始-->
                <div class="Menu_list">
                    <div class="menu_title">商品分类</div>
                    <a th:each="cate : ${category}" th:href="@{/front/SPU/index/{id}(id=${cate.id})}"
                       th:text="${cate.name}"></a>
                </div>
                <div class="Menu_list">
                    <div class="menu_title">推荐商品</div>
                    <ul class="recommend">
                        <li th:each="good,goodStat : ${goodsHot}" th:if="${goodStat.index} lt 3"><a
                                th:href="@{/front/SPU/view/{id}(id=${good.spu.id})}"
                                th:text="${good.spu.name}"></a></li>
                        <li th:each="good,goodStat : ${goodsNew}" th:if="${goodStat.index} lt 3"><a
                                th:href="@{/front/SPU/view/{id}(id=${good.spu.id})}"
                                th:text="${good.spu.name}"></a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="Navigation" id="Navigation">
            <ul class="Navigation_name">
                <li><a class="nav_on" id="mynav1" href="index.html"><span>首页</span></a></li>
                <li><a class="nav_on" id="mynav2" th:href="@{/front/SPU/lists}"><span>商品中心</span></a></li>
            </ul>
        </div>
        <script>$("#Navigation").slide({titCell: ".Navigation_name li"});</script>
        <!--购物车-->
        <!--购物车-->

        <div class="hd_Shopping_list" id="Shopping_list">
            <div class="s_cart"><em></em><a th:href="@{/front/cart}">我的购物车</a> <i class="ci-right">&gt;</i><i
                    class="ci-count" id="shopping-amount">0</i></div>
            <div class="dorpdown-layer">
                <div class="spacer"></div>
                <!--            这是浮动弹窗1    -->
                <ul class="p_s_list" id="cartsmenu1">

                </ul>
                <div class="Shopping_style">
                    <div class="p-total">共选择<b id="selectNum">1</b>件商品　共计￥<strong id="selectMoney"> 0.00</strong></div>
                    <a th:href="@{/front/cart}" title="去购物车结算" id="btn-payforgoods" class="Shopping">去购物车结算</a>
                </div>
            </div>
        </div>
    </div>
    </div>
</div>
<div id="Orders" class="Inside_pages  clearfix">
    <div class="Orders_style clearfix">
        <div class="address clearfix">
            <div class="title">收货人信息</div>
            <div class="adderss_list clearfix">
                <div class="title_name">选择收货地址
                    <a href="javascript:void(0)" @click="getAddress">切换地址</a>
                </div>

                <!--收货地址样式-->
                <div class="Shipping_address">
                    <ul class="detailed">
                        <li><label>收货人姓名</label><span>{{order.accept = address.accept}}</span></li>
                        <li>
                            <label>详细地址</label>
                            <span>
                {{order.address = address.province+address.city+address.area+address.address}}</span>
                        </li>
                        <li><label>联系方式</label><span>{{order.tel = address.tel}}</span></li>
                        <li><label>是否默认</label>
                            <span v-if="address.isdefault == 'y'">是</span>
                            <span v-if="address.isdefault == 'n'">否</span></li>

                    </ul>
                </div>
            </div>

            <form class="form" method="post">
                <fieldset>
                    <!--快递选择-->
                    <div class="express_delivery">
                        <div class="title_name">选择快递方式</div>

                        <ul class="dowebok">
                            <li><input type="radio" name="radio_send" data-labelauty="圆通快递" v-model="order.sendmode"
                                       value="圆通快递">
                                <div class="description">
                                    <em class="arrow"></em>
                                    <p>到付价格=现付价格*1.25 ，不足1元按1元收取，到付最低15元起。此价格供参考，详情请咨询圆通当地营业网点</p>
                                    <p>资费：15元</p>
                                    <p class="Note">满1000元包邮</p>
                                    <p><a href="#">点击查看是否在配送范围内</a></p>
                                </div>
                            </li>
                            <li><input type="radio" name="radio_send" data-labelauty="中通快递" v-model="order.sendmode"
                                       value="中通快递">
                                <div class="description">
                                    <em class="arrow"></em>
                                    <p>到付价格=现付价格*1.25 ，不足1元按1元收取，到付最低15元起。此价格供参考，详情请咨询圆通当地营业网点</p>
                                    <p>资费：15元</p>
                                    <p class="Note">满1000元包邮</p>
                                </div>
                            </li>
                            <li><input type="radio" name="radio_send" data-labelauty="申通快递" v-model="order.sendmode"
                                       value="申通快递">
                                <div class="description">
                                    <em class="arrow"></em>
                                    <p>到付价格=现付价格*1.25 ，不足1元按1元收取，到付最低15元起。此价格供参考，详情请咨询圆通当地营业网点</p>
                                    <p>资费：15元</p>
                                    <p class="Note">满1000元包邮</p>
                                </div>
                            </li>
                            <li><input type="radio" name="radio_send" data-labelauty="邮政EMS" v-model="order.sendmode"
                                       value="邮政EMS">
                                <div class="description">
                                    <em class="arrow"></em>
                                    <p>到付价格=现付价格*1.25 ，不足1元按1元收取，到付最低15元起。此价格供参考，详情请咨询圆通当地营业网点</p>
                                    <p>资费：15元</p>
                                    <p class="Note">满1000元包邮</p>
                                </div>
                            </li>
                            <li><input type="radio" name="radio_send" data-labelauty="韵达快递" v-model="order.sendmode"
                                       value="韵达快递">
                                <div class="description">
                                    <em class="arrow"></em>
                                    <p>到付价格=现付价格*1.25 ，不足1元按1元收取，到付最低15元起。此价格供参考，详情请咨询圆通当地营业网点</p>
                                    <p>资费：15元</p>
                                    <p class="Note">满1000元包邮</p>
                                </div>
                            </li>
                            <li><input type="radio" name="radio_send" data-labelauty="国通快递" v-model="order.sendmode"
                                       value="国通快递">
                                <div class="description">
                                    <em class="arrow"></em>
                                    <p>到付价格=现付价格*1.25 ，不足1元按1元收取，到付最低15元起。此价格供参考，详情请咨询圆通当地营业网点</p>
                                    <p>资费：15元</p>
                                    <p class="Note">满1000元包邮</p>
                                </div>
                            </li>
                            <li><input type="radio" name="radio_send" data-labelauty="顺丰快递" v-model="order.sendmode"
                                       value="顺丰快递">
                                <div class="description">
                                    <em class="arrow"></em>
                                    <p>到付价格=现付价格*1.25 ，不足1元按1元收取，到付最低15元起。此价格供参考，详情请咨询圆通当地营业网点</p>
                                    <p>资费：15元</p>
                                    <p class="Note">满1000元包邮</p>
                                </div>
                            </li>
                            <li><input type="radio" name="radio_send" data-labelauty="邮政小包" v-model="order.sendmode"
                                       value="邮政小包">
                                <div class="description">
                                    <em class="arrow"></em>
                                    <p>到付价格=现付价格*1.25 ，不足1元按1元收取，到付最低15元起。此价格供参考，详情请咨询圆通当地营业网点</p>
                                    <p>资费：15元</p>
                                    <p class="Note">满1000元包邮</p>
                                </div>
                            </li>
                            <li><input type="radio" name="radio_send" data-labelauty="天天快递" v-model="order.sendmode"
                                       value="天天快递">
                                <div class="description">
                                    <em class="arrow"></em>
                                    <p>到付价格=现付价格*1.25 ，不足1元按1元收取，到付最低15元起。此价格供参考，详情请咨询圆通当地营业网点</p>
                                    <p>资费：15元</p>
                                    <p class="Note">满1000元包邮</p>
                                </div>
                            </li>
                        </ul>

                    </div>

                    <!--付款方式-->
                    <div class="payment">
                        <div class="title_name">支付方式</div>
                        <ul>
                            <li><input type="radio" name="radio_pay" data-labelauty="余额支付" v-model="order.paymode"
                                       value="余额支付"></li>
                            <li><input type="radio" name="radio_pay" data-labelauty="支付宝" v-model="order.paymode"
                                       value="支付宝"></li>
                            <li><input type="radio" name="radio_pay" data-labelauty="财付通" v-model="order.paymode"
                                       value="财付通"></li>
                            <li><input type="radio" name="radio_pay" data-labelauty="银联支付" v-model="order.paymode"
                                       value="银联支付"></li>
                            <li><input type="radio" name="radio_pay" data-labelauty="货到付款" v-model="order.paymode"
                                       value="货到付款"></li>
                        </ul>
                    </div>
                    <!--产品列表-->
                    <div class="Product_List">
                        <table>
                            <thead>
                            <tr class="title">
                                <td class="name">商品名称</td>
                                <td class="price">商品价格</td>
                                <td class="Quantity">购买数量</td>
                                <td class="Money">金额</td>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="cart in carts">
                                <td class="Product_info">
                                    <a href="#"><img v-bind:src="cart.sku.spu.preview" width="100px"
                                                     height="100px"/></a>
                                    <a href="#" class="product_name" v-text="cart.sku.spu.name"></a>
                                </td>
                                <td><i>￥</i><span>{{(cart.price).toFixed(2)}}</span></td>
                                <td><span v-text="cart.mount"></span></td>
                                <td class="Moneys"><i>￥</i><span>{{(cart.price * cart.mount).toFixed(2)}}</span></td>
                            </tr>
                            </tbody>
                        </table>
                        <!--价格-->
                        <div class="price_style">
                            <div class="right_direction">
                                <ul>
                                    <li><label>商品总价</label><i>￥</i><span>{{cartPay.toFixed(2)}}</span></li>
                                    <li><label>配&nbsp;&nbsp;送&nbsp;&nbsp;费</label><i>￥</i>
                                        <span v-if="cartPay > 1000">0.00</span>
                                        <span v-if="cartPay <= 1000">15.00</span>
                                    </li>
                                    <li class="shiji_price"><label>实&nbsp;&nbsp;付&nbsp;&nbsp;款</label><i>￥</i>
                                        <span v-if="cartPay > 1000">{{(order.prices = cartPay).toFixed(2)}}</span>
                                        <span v-if="cartPay <= 1000">{{(order.prices = cartPay + 15).toFixed(2)}}</span>
                                    </li>
                                </ul>
                                <div class="btn">
                                    <input name="submit" type="button" value="提交订单" @click="addOrder"
                                           class="submit_btn"/>
                                    <input name="return" type="button" value="返回购物车" @click="returnCart"
                                           class="return_btn"/>
                                </div>
                                <div class="integral right">待订单确认后，你将获得<span>{{(order.prices*0.1).toFixed(0)}}</span>积分
                                </div>
                            </div>
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
    <!--友情链接-->
    <div class="Links">
        <div class="link_title">友情链接</div>
        <div class="link_address"><a href="#">四川茶叶协会</a> <a href="#">链接地址</a> <a href="#">链接地址</a> <a href="#">链接地址 </a>
            <a href="#">链接地址</a> <a href="#">链接地址</a> <a href="#">链接地址</a></div>
    </div>
</div>
<!--底部样式-->
<div class="footer">
    <div class="streak"></div>
    <div class="footerbox clearfix">
        <div class="left_footer">
            <div class="img"><img src="/images/img_33.png"/></div>
            <div class="phone">
                <h2>服务咨询电话</h2>
                <p class="Numbers">400-3455-334</p>
            </div>
        </div>
        <div class="right_footer">
            <dl>
                <dt><em class="icon_img"></em>购物指南</dt>
                <dd><a href="#">怎样购物</a></dd>
                <dd><a href="#">积分政策</a></dd>
                <dd><a href="#">会员优惠</a></dd>
                <dd><a href="#">订单状态</a></dd>
                <dd><a href="#">产品信息</a></dd>
                <dd><a href="#">怎样购物</a></dd>
            </dl>
            <dl>
                <dt><em class="icon_img"></em>配送方式</dt>
                <dd><a href="#">快递资费及送达时间</a></dd>
                <dd><a href="#">快递覆盖地区查询</a></dd>
                <dd><a href="#">验货与签收</a></dd>
                <dd><a href="#">订单状态</a></dd>
                <dd><a href="#">产品信息</a></dd>
                <dd><a href="#">怎样购物</a></dd>
            </dl>
            <dl>
                <dt><em class="icon_img"></em>配送方式</dt>
                <dd><a href="#">货到付款</a></dd>
                <dd><a href="#">支付宝</a></dd>
                <dd><a href="#">财付通</a></dd>
                <dd><a href="#">网银支付</a></dd>
                <dd><a href="#">银联支付</a></dd>
            </dl>
            <dl>
                <dt><em class="icon_img"></em>售后服务</dt>
                <dd><a href="#">退换货原则</a></dd>
                <dd><a href="#">退换货要求与运费规则</a></dd>
                <dd><a href="#">退换货流程</a></dd>
            </dl>
            <dl>
                <dt><em class="icon_img"></em>关于我们</dt>
                <dd><a href="#">关于我们</a></dd>
                <dd><a href="#">友情链接</a></dd>
                <dd><a href="#">媒体报道</a></dd>
                <dd><a href="#">新闻动态</a></dd>
                <dd><a href="#">企业文化</a></dd>

            </dl>
        </div>
    </div>
    <div class="slogen">
        <div class="footerbox clearfix ">
            <ul class="wrap">
                <li>
                    <a href="#"><img src="/images/icon_img_02.png" data-bd-imgshare-binded="1"></a>
                    <b>正品保证</b>
                    <span>正品行货 放心选购</span>
                </li>
                <li><a href="#"><img src="/images/icon_img_03.png" data-bd-imgshare-binded="2"></a>
                    <b>满68元包邮</b>
                    <span>购物满68元，免费快递</span>
                </li>
                <li>
                    <a href="#"><img src="/images/icon_img_04.png" data-bd-imgshare-binded="3"></a>
                    <b>厂家直供</b>
                    <span>价格更低，质量更可靠</span>
                </li>
                <li>
                    <a href="#"><img src="/images/icon_img_05.png" data-bd-imgshare-binded="4"></a>
                    <b>权威认证</b>
                    <span>政府扶持单位，安全保证</span>
                </li>
            </ul>
        </div>
    </div>
    <div class="footerbox Copyright">
        <p><a href="#">关于我们</a> | <a href="#">隐私申明</a> | <a href="#">成为供应商</a> | <a href="#">茶叶</a> | <a href="#">博客</a>
            |<a href="#">友情链接</a> | <a href="#">网站地图</a></p>
        <p>Copyright 2010 - 2015 巴山雀舌 四川巴山雀舌茗茶实业有限公司 zuipin.cn All Rights Reserved </p>
        <p>川ICP备10200063号-1</p>
        <a href="#" class="return_img"></a>
    </div>
</div>
<!--右侧菜单栏购物车样式-->
<div class="fixedBox">
    <ul class="fixedBoxList">
        <li class="fixeBoxLi user"><a th:href="@{/ucenter/user/index}"> <span class="fixeBoxSpan"></span>
            <strong>用户</strong></a></li>
        <li class="fixeBoxLi cart_bd" style="display:block;" id="cartboxs">
            <p class="good_cart">0</p>
            <a th:href="@{/front/cart}"> <span class="fixeBoxSpan"></span> <strong>购物车 </strong></a>
            <div class="cartBox">
                <div class="bjfff"></div>
                <div class="message">购物车内暂无商品，赶紧选购吧</div>
            </div>
        </li>
        <li class="fixeBoxLi Service "><span class="fixeBoxSpan"></span> <strong>客服</strong>
            <div class="ServiceBox">
                <div class="bjfffs"></div>
                <dl onclick="javascript:;">
                    <dt><img src="images/Service1.png"></dt>
                    <dd><strong>QQ客服1</strong>
                        <p class="p1">9:00-22:00</p>
                        <p class="p2"><a
                                href="http://wpa.qq.com/msgrd?v=3&amp;uin=123456&amp;site=DGG三端同步&amp;menu=yes">点击交谈</a>
                        </p>
                    </dd>
                </dl>
                <dl onclick="javascript:;">
                    <dt><img src="images/Service1.png"></dt>
                    <dd><strong>QQ客服1</strong>
                        <p class="p1">9:00-22:00</p>
                        <p class="p2"><a
                                href="http://wpa.qq.com/msgrd?v=3&amp;uin=123456&amp;site=DGG三端同步&amp;menu=yes">点击交谈</a>
                        </p>
                    </dd>
                </dl>
            </div>
        </li>
        <li class="fixeBoxLi code cart_bd " style="display:block;" id="cartboxs">
            <span class="fixeBoxSpan"></span> <strong>微信</strong>
            <div class="cartBox">
                <div class="bjfff"></div>
                <div class="QR_code">
                    <p><img src="/images/erweim.jpg" width="150px" height="150px" style=" margin-top:10px;"/></p>
                    <p>微信扫一扫，关注我们</p>
                </div>
            </div>
        </li>

        <li class="fixeBoxLi Home"><a th:href="@{/ucenter/collect/list}"> <span class="fixeBoxSpan"></span>
            <strong>收藏</strong>
        </a></li>
        <li class="fixeBoxLi BackToTop"><span class="fixeBoxSpan"></span> <strong>返回顶部</strong></li>
    </ul>
</div>
<script>
    /*快递方式*/
    $(function () {
        $(':input').labelauty();
    });
</script>
</body>
</html>
